<template>
  <view class="page">
    <view class="header">
      <view class="left">
        <text class="text">自习室</text>
        <text class="text" style="margin-top: 20rpx">STUDY ROOM</text>
      </view>

      <view class="right">
        <view class="btn-item" @click="() => $uni.navigateTo({ url: '/studyRoom/pages/rank/index' })">
          <view class="icon-container">
            <image class="icon" :src="rankIcon"></image>
          </view>
          <view class="text">排行榜</view>
        </view>
        <view class="btn-item" @click="() => $uni.switchTab({ url: '/pages/mine/mine' })">
          <view class="icon-container">
            <image class="icon" :src="mineIcon"></image>
          </view>
          <view class="text">我的</view>
        </view>
      </view>
    </view>

    <!--		切换 所有 / 我的 / 仅可用-->
    <view class="toggle-bar">
      <view
        class="item"
        v-for="item in toggleBarList"
        :key="item.label"
        :class="{ active: item.label === currentToggleBarItem }"
        @click="
          () => {
            currentToggleBarItem = item.label
            resetPagination()
          }
        "
        >{{ item.label }}</view
      >
    </view>

    <view class="study-room-list" v-if="studyRoomList.length > 0">
      <view class="item" v-for="item in studyRoomList" :key="item.studyRoomId">
        <!--				默认图标-->
        <image class="icon" src="https://kou.gdzmtech.com/pic/Ja4mncQb5KrZXtvT9tjA.png" v-if="!item.studyRoomPic"></image>
        <!--				自定义图标-->
        <image class="icon" :src="getShowImage(item.studyRoomPic)" v-else></image>

        <view class="right">
          <view class="study-room-name">{{ item.studyRoomName }}</view>
          <view class="join-count">
            <text style="color: #a75b07">{{ item.currentOccupancy + item.virtualJoinCount }}</text>
            <text> 人自习中</text>
          </view>
          <!--					自习室状态-->
          <view class="status" v-if="item.studyStatus">
            <text v-if="item.studyStatus === 'Studying'">学习中</text>
          </view>
          <!--					自习室可用-->
          <view class="btn" v-if="item.studyRoomStatus === 'Available'" @click="() => getStudyRoomDetail(item)">进入</view>

          <view class="btn disabled" v-else-if="item.studyRoomStatus === 'Unavailable'" @click="() => getStudyRoomDetail(item)"
            >不可用</view
          >
        </view>
      </view>
      <uniLoadMore :status="loadMoreStatusText"></uniLoadMore>
    </view>
    <empty v-else height="calc(100vh - 372rpx)"></empty>

    <enterToStudyRoom ref="enterToStudyRoom"></enterToStudyRoom>
  </view>
</template>

<script>
import mineIcon from "./assets/mine.svg"
import rankIcon from "./assets/rank.svg"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import dict, { dictActionType } from "@/store/modules/dict"
import store from "@/store"
import { getShowImage, handleUrlParams } from "@/utils"
import empty from "@/components/empty.vue"
import enterToStudyRoom from "@/studyRoom/components/enterToStudyRoom/index.vue"

export default {
  components: {
    uniLoadMore,
    empty,
    enterToStudyRoom,
  },
  data() {
    return {
      mineIcon,
      rankIcon,
      currentToggleBarItem: "所有",
      toggleBarList: [
        {
          label: "所有",
        },
        {
          label: "我的",
        },
        {
          label: "仅可用",
        },
      ],
      studyRoomList: [],
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreStatusText: "more",
    }
  },
  async onLoad() {
    const dictList = await store.dispatch(dictActionType.actions.dict)
    console.log(dictList, "dictList")
  },
  onShow() {
    this.resetPagination()
  },
  methods: {
    getShowImage,
    // 获取自习室列表
    getStudyRoomList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        let studyRoomStatus //自习室状态（可用，不可用）
        let url //请求地址
        switch (this.currentToggleBarItem) {
          case "所有":
            studyRoomStatus = ""
            url = "studyRoom/listStudyRoom"
            break
          case "我的":
            studyRoomStatus = ""
            url = "studyRoom/myJoiningRoom"
            break
          case "仅可用":
            studyRoomStatus = "Available"
            url = "studyRoom/listStudyRoom"
            break
        }
        request({
          url,
          data: {
            ...this.pagination,
            studyRoomStatus,
          },
          errorHandle: true,
        }).then((data) => {
          this.studyRoomList.push(...data.records)
          //判断是否还有数据
          if (data.total <= this.studyRoomList.length) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    //重置分页并重新加载数据
    resetPagination() {
      return new Promise((resolve, reject) => {
        this.pagination.current = 1
        this.studyRoomList = []
        uni.showLoading({
          title: "加载中",
          mask: true,
        })
        this.getStudyRoomList().finally(() => {
          uni.hideLoading()
          resolve()
        })
      })
    },
    // 获取自习室详情
    getStudyRoomDetail(item) {
      this.$refs.enterToStudyRoom.enterToStudyRoom(item.studyRoomId)
    },
  },
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") {
      return
    }
    this.pagination.current++
    this.getStudyRoomList()
  },
  onPullDownRefresh() {
    this.resetPagination().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding: {
    left: 30rpx;
    right: 30rpx;
    bottom: env(safe-area-inset-bottom);
  }
  .header {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    .left {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .text {
        font-size: 40rpx;
      }
    }
    .right {
      display: flex;
      .btn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 30rpx;
        .icon-container {
          background: var(--background-color);
          border: 1px solid rgba(187, 187, 187, 1);
          border-radius: 4px;
          width: 90rpx;
          height: 90rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon {
            width: 50rpx;
            height: 50rpx;
          }
        }
        .text {
          margin-top: 8rpx;
          color: #666060;
          font-size: 30rpx;
        }
      }
    }
  }
  .toggle-bar {
    display: flex;
    .item {
      margin-top: 30rpx;
      margin-right: 20rpx;
      padding: 10rpx 20rpx;
      border-radius: 32rpx;
      border: 2rpx solid var(--dark-border-color);
      font-size: 30rpx;
      &.active {
        background: var(--theme-color);
        color: white;
        border: 2rpx solid transparent;
      }
    }
  }
  .study-room-list {
    .item {
      margin-top: 30rpx;
      background: var(--background-color);
      box-shadow: 0 2px 6px 0 rgba(187, 187, 187, 0.5);
      border-radius: 20rpx;
      display: flex;
      padding: 20rpx;
      align-items: center;
      .icon {
        width: 216rpx;
        height: 204rpx;
      }
      .right {
        margin-left: 60rpx;
        .study-room-name {
          font-size: 32rpx;
        }
        .join-count {
          color: var(--text-color-light);
          font-size: 30rpx;
          margin-top: 14rpx;
        }
        > .status {
          margin-top: 14rpx;
          font-size: 30rpx;
          color: var(--theme-color);
        }
        .btn {
          background: var(--theme-color);
          padding: 10rpx 0;
          width: 172rpx;
          text-align: center;
          border-radius: 30rpx;
          color: white;
          font-size: 30rpx;
          margin-top: 20rpx;
          &.disabled {
            background: var(--dark-border-color);
          }
        }
      }
    }
  }
}
</style>
